<template>
	<view class="rtm-layout flex-row">
		<view class="container flex-row" v-if="view">
			<uni-icons type="eye" size="12" color="#BCC1C7"></uni-icons>
			<text class="text"> {{view_count}} </text>
		</view>
		<view class="container flex-row" v-if="like">
			<uni-icons type="hand-up" size="12" color="#BCC1C7"></uni-icons>
			<text class="text"> {{like_count}} </text>
		</view>
		<uni-icons type="more-filled" size="18" color="#BCC1C7" class="more" v-if="more"></uni-icons>
	</view>
</template>

<script setup>
	/**
	 * @property {Boolean} view 是否要显示查看人数
	 * @property {Number, String} view_count 已查看人数
	 * @property {Boolean} like 是否要显示点赞人数
	 * @property {Number, String} like_count 已点赞人数
	 * @property {Boolean} more 是否要显示更多
	 */
	defineProps({
		view: {
			type: Boolean,
			default: true
		},
		view_count: {
			type: [Number, String],
			default: 0
		},
		like: {
			type: Boolean,
			default: true
		},
		like_count: {
			type: [Number, String],
			default: 0
		},
		more: {
			type: Boolean,
			default: true
		}
	})
</script>

<style lang="scss" scoped>
	.rtm-layout {
		.container {
			display: flex;
			width: 120rpx;
			align-items: center;
			margin-left: 10rpx;

			.text {
				margin-left: 4rpx;
				font-size: 22rpx;
				color: $me-color-gray-7;
			}
		}

		.more {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 10rpx;
		}
	}
</style>